<template>
  <div>
    <el-card shadow="never" class="margin-30">
      <div slot="header">
        <el-button type="primary" size="small" @click="openDialog">新增</el-button>
      </div>
      <el-table :data="activityList" border stripe>
        <el-table-column
          fixed="left"
          align="center"
          type="index"
          label="序号"
          width="70"
        />
        <el-table-column
          align="center"
          label="商品图片"
          width="140"
        >
          <template slot-scope="scope">
            <img width="100" height="100" :src="scope.row.pic" alt="">
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="活动时间"
          width="300"
        >
          <template slot-scope="scope">
            <div>开始时间：{{ scope.row.promotionStartTime }}</div>
            <div style="margin-top:15px;">结束时间：{{ scope.row.promotionEndTime }}</div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="是否过期"
          width="90"
        >
          <template slot-scope="scope">
            <div>
              {{ (new Date(scope.row.promotionEndTime) > Date.now())?'否':'是' }}
              <!-- {{ scope.row.promotionEndTime | returnPassTime }} -->
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="商品名称"
          width="150"
        />
        <el-table-column
          prop="brandName"
          align="center"
          label="品牌名称"
          width="150"
        />
        <el-table-column
          prop="price"
          align="center"
          label="商品价格"
          width="150"
        />
        <el-table-column
          prop="productCategoryName"
          align="center"
          label="商品类别"
          width="150"
        />
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间"
          width="200"
        />
        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" style="color:red;" @click="deleteActivity(scope.row.recommendId)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>
    <activityDialog ref="activityModal" @useGetActivityList="getActivityList" />

  </div>
</template>

<script>
import activityDialog from './addDialog'
import {
  findAllRecommends as findAllRecommendsAPi,
  delRecommend as delRecommendApi
} from '@/api/shop/activity'
export default {
  name: 'Activity',
  components: {
    activityDialog
  },
  filters: {
    returnPassTime(time) {
      console.log(new Date(time) - new Date())
      return new Date(time) - Date.now() < 0 ? '是' : '否'
    }
  },
  data() {
    return {
      activityList: []
    }
  },
  created() {
    this.getActivityList()
  },
  methods: {
    // 打开弹框
    openDialog() {
      this.$refs.activityModal.openModal()
    },
    // 删除限时活动
    deleteActivity(id) {
      this.$confirm('此操作将永久删除此限时活动, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRecommendApi(id)
          .then(res => {
            const { messaage, success } = res
            if (success) {
              this.$message.success('删除成功!')
              this.getActivityList()
            } else {
              this.$message.error(messaage)
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取限时活动数据
    getActivityList() {
      findAllRecommendsAPi()
        .then(res => {
          const { messaage, data, success } = res
          if (success) {
            this.activityList = data.items
          } else {
            this.$message.error(messaage)
          }
        })
    }
  }
}
</script>

<style>

</style>
